<template>
    <div class="product">
        <img :src="shopItem.shopImgUrl" alt="Product Image">
        <div class="product-details">
            <h2>{{ shopItem.shopName }}</h2>
            <p>$ {{ shopItem.price }}.00</p>
            <div class="quantity">
                <button :disabled="shopItem.count <= 1" @click="shopItem.count--">-</button>
                <input type="text" v-model="shopItem.count">
                <button :disabled="shopItem.count >= shopItem.stock" @click="shopItem.count++">+</button>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { type IShopInfo } from '@/types/shop'
import { ref } from 'vue';

// 接收从父组件传过来的item
const props = defineProps<{
    item: IShopInfo
}>()

//  props 接收父组件传过来的item保留原有的ref响应性，但是在子组件是只读的，所以不能修改props.item的值，解决方法是定义一个新变量shopItem，通过深拷贝把props.item的内存地址赋值给新变量shopItem。
const shopItem = ref<IShopInfo>(props.item)

</script>

<style lang="scss" scoped>
.product {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.product img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.product-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-details h2 {
    margin: 0;
}

.product-details p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* 数量调节按钮 */
.quantity {
    display: flex;
    align-items: center;
}

.quantity button {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
}

.quantity button:hover {
    background-color: deepskyblue;
}

.quantity input {
    width: 40px;
    text-align: center;
}

button:disabled,
button:disabled:hover {
    background-color: #ff0000;
}
</style>